<template>
  <view class="course-filter">
    <view
      class="filter-item"
      v-for="(item, index) in courseTypes"
      :key="index"
      :class="{ active: activeType === item.type }"
      @tap="$emit('type-change', item.type)"
    >
      <text>{{ item.name }}</text>
    </view>
  </view>
</template>
  
  <script setup>
import { ref, onMounted, defineEmits } from "vue";
const props = defineProps({
  activeType: {
    type: String,
    default: "all",
  },
  courseTypes: {
    type: Array,
    default: () => [],
  },
});

defineEmits(["type-change"]);

onMounted(() => {
  console.log("courseTypes:", props.courseTypes);
});
</script>
  
  <style lang="scss">
.course-filter {
  display: flex;
  padding: 20rpx 0;
  gap: 40rpx;
  font-size: 36rpx;
  color: #a3a39e;

  .filter-item {
    position: relative;
    padding: 10rpx 0;

    &.active {
      text {
        color: #3b3b3b;
        font-weight: bold;
      }
    }
  }
}
</style>